<template>
	<view class="product_info">
		<ShopPro style="background-color: #38393a;width: 97%;margin: 0 auto;">
			<template v-slot:shopName>
				<view>{{CertificatePro.name}}</view>
			</template>
			<template v-slot:residue>
				<view class="Remaining">剩余{{CertificatePro.RemainingTaiwan}}台</view>
			</template>
			<template v-slot:countNum>
				<view>{{CertificatePro.price}}USDT</view>
			</template>
			<template v-slot:countChange>
				<!-- 双向绑定到vuex里面了 -->
				<!-- <van-stepper v-model="num" /> -->
				<Stepper :num="num" :RemainingTaiwan="CertificatePro.RemainingTaiwan" @changeNum="changeNum"></Stepper>
			</template>
			<template v-slot:freight>
				<span>规格</span>
				<span>{{CertificatePro.name}}</span>
			</template>
			<template v-slot:needToPay>
				<span></span>
				<span></span>
			</template>
		</ShopPro>
	</view>
	<ProPayment></ProPayment>
	<ProInstructions>
		<template v-slot:TextContent>
			<view>设备兑换券可以赠送给好友，也可以自己使用</view>
		</template>
	</ProInstructions>
	<BuyPro :TotalPrice="TotalPrice" :proName="CertificatePro.name" :num="num"></BuyPro>
</template>

<script setup lang="ts">
	import { computed, ref } from 'vue'
	import ShopPro from '@/components/shopPro/index.vue'
	import ProPayment from '@/components/product/ProPayment/index.vue'
	import ProInstructions from '@/components/product/ProInstructions/index.vue'
	import BuyPro from '@/components/product/BuyPro/index.vue'
	import Stepper from '@/components/product/Stepper/index.vue'
	import { useStore } from 'vuex'
	const { state: { product } } = useStore()
	let CertificatePro = product
	// 数量来源
	let num = ref<number>(1)
	const changeNum = (value : number) => {
		num.value = value
	}
	const TotalPrice = computed(() => {
		return CertificatePro.price * num.value
	})
</script>

<style lang="scss" scoped>
	.product_info {
		margin: 20px auto;

		.Remaining {
			font-size: 20px;
			color: #FF454F;
			border: 1px solid #FF454F;
			padding: 0 10px;
		}
	}
</style>